<template>
    <el-card style='margin:10px'>
        <el-form :inline='true' :model='searchForm' class='demo-form-inline'>
            <el-form-item label='表名'>
                <el-input v-model='searchForm.table' placeholder='请输入表名' />
            </el-form-item>
            
            <el-form-item>
                <el-button type='primary' @submit='search'>查询</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col>
                <router-link to='/Access/Add'>
                    <el-button>新建权限</el-button>
                </router-link>
                
            </el-col>
        </el-row>
    </el-card>
    <el-card style='margin:10px'>
        <el-table :data='tableData.data' style='width: 100%'>
            <el-table-column fixed prop='id' label='ID' width='120' />
            <el-table-column fixed prop='name' label='表名' width='120' />
            <el-table-column prop='alias' label='别名' width='120' />
            <el-table-column prop='detail' label='描述' width='120' />
            <el-table-column prop='date' label='创建时间' width='120' />
            <el-table-column prop='get' label='Get权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.get' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='head' label='Head权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.head' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='gets' label='Gets权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.gets' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='heads' label='Heads权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.heads' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='post' label='Post权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.post' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='put' label='Put权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.put' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='delete' label='Delete权限' width='200'>
                <template #default='scope'>
                    <el-tag v-for='it in scope.row.delete' :key='it' style='margin: 2px;'>{{ it }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column fixed='right' label='操作' width='120'>
                <template #default>
                    
                    <el-button link type='primary' size='small'>编辑</el-button>
                    <el-button link type='danger' size='small'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-model:currentPage='tableData.current'
            v-model:page-size='tableData.size'
            :page-sizes='[10, 20, 30, 40]'
            :small='small'
            :background='background'
            layout='total, sizes, prev, pager, next, jumper'
            :total='tableData.total'
            @size-change='handleSizeChange'
            @current-change='handlePageNoChange'
        />
    </el-card>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, reactive, Ref, ref } from 'vue'
import { IPage, Page } from '/@/api'
import accessService, { AccessData } from '/@/api/access/AccessService'
import { useDzModal } from '/@/utils/DzModalService'

import { ElMessageBox } from 'element-plus'
import router from '/@/router'
const searchForm = reactive({
    table: ''
    
})
 
const tableData = ref(new Page<AccessData>())
loadData()
async function loadData(pageNo = 0,pageSize = 10) {
    let rs = await accessService.getList(searchForm.table,pageNo,pageSize)
    
    console.log(rs.data)

    tableData.value = rs
}

 
function search() {
    loadData()   
}
function handlePageNoChange(pageNo:number) {
    loadData(pageNo,tableData.value.size)
}
function handleSizeChange(pageSize:number) {
    loadData(tableData.value.current,pageSize)
}
</script>
